<script lang="ts" setup>
import moment from 'moment'
import type { OrderModel } from '~/model'

defineProps<{
  orders: OrderModel[]
}>()

const router = useRouter()

// function timeFormatter(r: any, c: any, ts: number, i: any) {
//   return moment(ts).format('MM/DD HH:mm')
// }
function userBatchFormatter(r: OrderModel) {
  return `${r.consumer?.name}/${r.batch}`
}
// function firstItemFormatter(r: OrderModel, c: any, ts: number, i: any) {
//   const item = r.items[0]
//   return `${item.material?.name} / ${item.quantity}${item.material?.unit}`
// }

function viewOrder(order: OrderModel) {
  router.push(`/orders/detail?id=${order.id}`)
}

// function notesFormatter(r: OrderModel, c: any, ts: number, i: any) {
//   const notes = r.notes.replaceAll('\n', ' ')
//   return notes.length > 8 ? `${notes.slice(0, 6)}...` : notes
// }
</script>

<template>
  <table class="lx-table">
    <thead>
      <tr>
        <th>订单时间</th>
        <th>用户/批次</th>
        <th>主要商品/数量</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="order in orders" :key="order.id" @click="viewOrder(order)">
        <td>
          <span>{{ moment(order.date).format('MM/DD') }}</span>
          <br>
          <span>{{ moment(order.date).format('HH:mm') }}</span>
        </td>
        <td>{{ userBatchFormatter(order) }}</td>
        <td>
          <span>{{ order.items[0].material?.name }}({{ order.items[0].material?.specification }})</span>
          <br>
          <span>{{ order.items[0].quantity }} {{ order.items[0].material?.unit }}</span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped>

</style>
